import React from "react";
import styled, { keyframes } from "styled-components";

const pathAnim = keyframes`
  0% {
    stroke-dashoffset: 1413px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
`;

const AnimatedPath = styled.path`
  stroke-dashoffset: 1413px;
  stroke-dasharray: 1413px;
  animation: ${pathAnim} 1000ms ease-in-out forwards;
`;

export default function ChartPlaceholder() {
  return (
    <svg
      width="100%"
      height="100%"
      viewBox="0 0 680 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="none"
    >
      <line
        x1="-70"
        y1="1"
        x2="750"
        y2="1"
        stroke="currentColor"
        strokeOpacity="0.5"
        strokeDasharray="3 3"
      />
      <line
        x1="-70"
        y1="55.6"
        x2="750"
        y2="55.6"
        stroke="currentColor"
        strokeOpacity="0.5"
        strokeDasharray="3 3"
      />
      <line
        x1="-70"
        y1="111.3"
        x2="750"
        y2="111.3"
        stroke="currentColor"
        strokeOpacity="0.5"
        strokeDasharray="3 3"
      />
      <line
        x1="-70"
        y1="166"
        x2="750"
        y2="166"
        stroke="currentColor"
        strokeOpacity="0.5"
        strokeDasharray="3 3"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M-68.9066 18.3479L-61.41 43.4527C-54.5949 68.5575 -40.2832 118.767 -25.9714 115.181C-11.6597 111.594 2.65205 54.2119 16.9638 50.6255C31.2755 47.0391 45.5872 97.2486 59.899 93.6622C74.8922 90.0759 89.2039 32.6935 103.516 25.5207C117.827 18.3479 132.139 61.3847 146.451 93.6622C160.763 125.94 175.074 147.458 189.386 122.353C203.698 97.2486 218.01 25.5207 232.321 14.7615C246.633 4.00235 260.945 54.2119 275.256 64.9711C289.568 75.7303 303.88 47.0391 318.192 47.0391C332.503 47.0391 347.497 75.7303 361.808 97.2486C376.12 118.767 390.432 133.113 404.744 133.113C419.055 133.113 433.367 118.767 447.679 122.353C461.99 125.94 476.302 147.458 490.614 133.113C504.926 118.767 519.237 68.5575 533.549 36.2799C547.861 4.00235 562.173 -10.3432 576.484 14.7615C590.796 39.8663 605.108 104.421 620.101 115.181C634.413 125.94 648.724 82.9031 663.036 72.1439C677.348 61.3847 691.66 82.9031 705.971 100.835C720.283 118.767 734.595 133.113 741.41 140.285L748.907 147.458V168.977H741.41C734.595 168.977 720.283 168.977 705.971 168.977C691.66 168.977 677.348 168.977 663.036 168.977C648.724 168.977 634.413 168.977 620.101 168.977C605.108 168.977 590.796 168.977 576.484 168.977C562.173 168.977 547.861 168.977 533.549 168.977C519.237 168.977 504.926 168.977 490.614 168.977C476.302 168.977 461.99 168.977 447.679 168.977C433.367 168.977 419.055 168.977 404.744 168.977C390.432 168.977 376.12 168.977 361.808 168.977C347.497 168.977 332.503 168.977 318.192 168.977C303.88 168.977 289.568 168.977 275.256 168.977C260.945 168.977 246.633 168.977 232.321 168.977C218.01 168.977 203.698 168.977 189.386 168.977C175.074 168.977 160.763 168.977 146.451 168.977C132.139 168.977 117.827 168.977 103.516 168.977C89.2039 168.977 74.8922 168.977 59.899 168.977C45.5872 168.977 31.2755 168.977 16.9638 168.977C2.65205 168.977 -11.6597 168.977 -25.9714 168.977C-40.2832 168.977 -54.5949 168.977 -61.41 168.977H-68.9066L-68.9066 18.3479Z"
        fill="url(#paint0_linear_1032_7989)"
      />
      <AnimatedPath
        d="M-68.9066 18.3479L-61.41 43.4527C-54.5949 68.5575 -40.2832 118.767 -25.9714 115.181C-11.6597 111.594 2.65204 54.2119 16.9638 50.6255C31.2755 47.0391 45.5872 97.2486 59.899 93.6623C74.8922 90.0759 89.2039 32.6935 103.516 25.5207C117.827 18.3479 132.139 61.3847 146.451 93.6623C160.763 125.94 175.074 147.458 189.386 122.353C203.698 97.2486 218.01 25.5207 232.321 14.7615C246.633 4.00235 260.945 54.2119 275.256 64.9711C289.568 75.7303 303.88 47.0391 318.192 47.0391C332.503 47.0391 347.497 75.7303 361.808 97.2486C376.12 118.767 390.432 133.113 404.744 133.113C419.055 133.113 433.367 118.767 447.679 122.353C461.99 125.94 476.302 147.458 490.614 133.113C504.926 118.767 519.237 68.5575 533.549 36.2799C547.861 4.00235 562.173 -10.3432 576.484 14.7615C590.796 39.8663 605.108 104.421 620.101 115.181C634.413 125.94 648.725 82.9031 663.036 72.1439C677.348 61.3847 691.66 82.9031 705.971 100.835C720.283 118.767 734.595 133.113 741.41 140.285L748.907 147.458"
        stroke="currentColor"
        strokeWidth="2"
      />
      <defs>
        <linearGradient
          id="paint0_linear_1032_7989"
          x1="340"
          y1="1.97656"
          x2="340"
          y2="168.977"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="currentColor" stopOpacity="0.16" />
          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
        </linearGradient>
        <clipPath id="clip0_1032_7989">
          <rect width="680" height="167" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}
